Creating rollover buttons

An animation effect occurs when the browser is instructed to toggle between two (or three) slightly different images of the same button. You can easily create these images in programs such as Adobe Photoshop.

Note: The images must be exactly the same size or you won't get consistent results in all browsers.

The first image determines the normal appearance of the rollover button, that is, how it looks while the mouse pointer is anywhere else on the page. The second image is a highlighted version of the image that shows when the mouse pointer is on top. The third image appears when the rollover button is clicked. You can use a mouse rollover as a hyperlink to another location to display another image or text, and assign a prebuilt Adobe GoLive action to a button.

Adobe GoLive inserts a custom element that serves as a container for the images plus the JavaScript that switches its content, depending on the current location of the mouse pointer. Adobe GoLive automatically loads all the rollover images when the page loads in a Web browser.

To create a mouse rollover button:

1 Drag the Rollover icon from the Smart tab () in the Objects palette to your document.

2 To select the main image for the button, click the Main Image icon in the Rollover Inspector, and click the Browse button () to select an image or drag from the Point and Shoot button to an image in the site window.

3 To select an image for when the mouse pointer is over the button, click the Over Image icon, select the check box next to the file selection text box, and select the image.

4 To select an image for when the button is clicked, click the Click image icon, select the check box next to the file selection text box, and select the image as described in step 3.

You can also use drag-and-drop to assign the three button images. First drag the main image from the site window or a folder to the Rollover icon in the document window. Then Alt-drag (Windows) or Option-drag (Mac OS) a second image to assign the mouse-over image. Shift-drag to assign the on-click image. All images should be the same size.

To link a rollover to another location:

In the Rollover Inspector, select the URL check box and type a Universal Resource Locator in the text box. You can also use the Browse button or the Point and Shoot button to select a link destination.

To display a message at the bottom of the browser window as the pointer moves over the rollover:

In the Rollover Inspector, select the Status check box and enter the text you want in the browser window. To test the effect, preview the page in a Web browser.

Adding Interactivity > Creating mouse rollovers > Creating rollover buttons